<template>
  <a-modal
    v-model:visible="visible"
    modal-class="modal-form"
    title-align="start"
    :title="title"
    :top="80"
    :width="800"
    :align-center="false"
    :draggable="true"
    :mask-closable="false"
    :unmount-on-close="true"
    :ok-button-props="{ disabled: loading }"
    :cancel-button-props="{ disabled: loading }"
    :on-before-ok="handlerOk"
    @close="handleClose"
  >
    <a-spin class="form-full" :loading="loading">
      <a-form
        ref="formRef"
        :model="formModel"
        label-align="right"
        :auto-label-width="true"
        :rules="formRules"
      >
        <a-row>
          <!-- 用户名 -->
          <a-col :span="24">
            <a-form-item field="avatar" label="头像">
             <BhUploadImg v-model="formModel.avatar"></BhUploadImg>
            </a-form-item>
          </a-col>
          <!-- 用户名 -->
          <a-col :span="12">
            <a-form-item field="username" label="用户账号">
              <a-input
                v-model="formModel.username"
                :disabled="!isAddHandle"
                placeholder="请输入用户账号"
              />
            </a-form-item>
          </a-col>
          <!-- 性别 -->
          <a-col :span="12">
            <a-form-item label="性别">
              <a-select v-model="formModel.gender" placeholder="请选择用户性别">
                <a-option :value="1">男</a-option>
                <a-option :value="2">女</a-option>
                <a-option :value="3">保密</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- 用户真实姓名名 -->
          <a-col :span="12">
            <a-form-item label="用户姓名">
              <a-input
                v-model="formModel.realname"
                placeholder="请输入用户姓名"
              />
            </a-form-item>
          </a-col>
          <!-- 邮箱 -->
          <a-col :span="12">
            <a-form-item field="email" label="邮箱">
              <a-input v-model="formModel.email" placeholder="请输入邮箱" />
            </a-form-item>
          </a-col>
          <!-- 昵称 -->
          <a-col :span="12">
            <a-form-item field="nickname" label="昵称">
              <a-input
                v-model="formModel.nickname"
                placeholder="请输入用户昵称"
              />
            </a-form-item>
          </a-col>
          <!-- 手机号 -->
          <a-col :span="12">
            <a-form-item field="mobile" label="手机号">
              <a-input v-model="formModel.mobile" placeholder="请输入手机号" />
            </a-form-item>
          </a-col>
          <!-- 密码 -->
          <a-form-item v-if="isAddHandle" field="password" label="密码">
            <a-input-password
              v-model="formModel.password"
              placeholder="请输入密码"
            />
          </a-form-item>
          <a-form-item label="个人简介">
            <a-textarea v-model="formModel.note" placeholder="请输入个人简介" />
          </a-form-item>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup lang="ts">
  import useLoading from '@/hooks/loading';
  import useVisible from '@/hooks/visible';
  import { UserUpdateRequest, updateUser } from '@/api/system/user';
  import { Message } from '@arco-design/web-vue';
  import formRules from '../types/form.rules';

  const { visible, setVisible } = useVisible();
  const { loading, setLoading } = useLoading();

  const title = ref<string>();
  const isAddHandle = ref<boolean>(true);
  const defaultForm = (): UserUpdateRequest => {
    return {
      id: undefined,
      username: undefined,
      password: undefined,
      nickname: undefined,
      mobile: undefined,
      email: undefined,
      sex: undefined,
    };
  };
  const formRef = ref();
  const formModel = ref<UserUpdateRequest>({});
  const emits = defineEmits(['restart']);

  const renderForm = (record: any) => {
    formModel.value = { ...record };
  };
  // 打开新增
  const openAdd = () => {
    title.value = '添加用户';
    isAddHandle.value = true;
    renderForm({ ...defaultForm() });
    setVisible(true);
  };
  // 打开修改
  const openUpdate = (record: any) => {
    title.value = '修改用户';
    isAddHandle.value = false;
    renderForm({ ...defaultForm(), ...record });
    setVisible(true);
  };
  defineExpose({ openAdd, openUpdate });

  // 清空
  const handlerClear = () => {
    setLoading(false);
  };
  // 确定
  const handlerOk = async () => {
    setLoading(true);
    try {
      // 验证参数
      const error = await formRef.value.validate();
      if (error) {
        return false;
      }
      //  修改
      await updateUser(formModel.value);
      Message.success('操作成功');

      emits('restart');
      // 清空
      handlerClear();
      return true;
    } catch (e) {
      return false;
    } finally {
      setLoading(false);
    }
  };
  // 关闭
  const handleClose = () => {
    handlerClear();
  };
</script>

<style scoped lang="less"></style>
